<template>
  <div class="show-container">
    <div class="header-showproduct">
      <div class="title">{{ this.title }}</div>
      <div class="more" @click="linkToMore(typeName)">
        更多&nbsp;&nbsp;<i class="iconfont">&#xe78a;</i>
      </div>
    </div>
    <div class="show-box">
      <div class="card" v-for="(item, i) in productsData" :key="i" @click="toDetail(item)">
        <div class="img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="right">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.phoneType }}</div>
          <div class="price">{{ item.price }}</div>
          <add-button @click.native.stop="handleAddToCompare(item)"></add-button>
        </div>
      </div>
      <drawer-detail :openDrawer="openDrawer" :data="drawerData" @close="handleClose" />
    </div>
  </div>
</template>

<script>
import AddButton from './AddButton.vue';
import DrawerDetail from './DrawerDetail.vue';
export default {
  components: {
    AddButton,
    DrawerDetail
  },
  props: {
    title: {
      type: String,
      require: true,
    },
    data: {
      type: Array,
      require: true,
    },
    typeName: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      productsData: this.data,
      openDrawer: false,
      drawerData: null,
    };
  },
  methods: {
    toDetail(val) {
      // this.$router.push({
      //   name: "Detail",
      //   params: {
      //     val,
      //   },
      // });
      this.drawerData = val;
      this.openDrawer = true;
    },
    linkToMore(val) {
      this.$router.push({
        name: "PhoneMore",
        params: {
          val,
        },
      });
    },
    handleClose() {
      this.openDrawer = false;
    },
    handleAddToCompare(val) {
      const storeLength = this.$store.state.phones.length;
      if (storeLength > 3) {
        //提示不能再添加了
        this.$message({
          message: '对比数据已满！',
          type: 'warning',
        });
      } else {
        this.$message({
          message: '已添加进对比列表！',
          type: 'success',
        });
        this.$store.commit('addPhone', val);
      }
    }
  },
};
</script>

<style lang='less' scpoed>
.show-container {
  width: 100%;
  //   height: 500px;
  //   background-color: #f9f9f9;
  margin: 10px auto;
  padding: 0 5px;

  padding-bottom: 15px;
}

.header-showproduct {
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid rgb(221, 221, 221);

  .title {
    padding: 0;
    height: 100%;
    line-height: 50px;
  }

  .more {
    line-height: 50px;
    cursor: pointer;
  }
}

.show-box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  //   padding: 10px 5px;
}

.card {
  width: 340px;
  height: 180px;
  border: 1px solid rgb(243, 243, 243);
  border-radius: 15px;
  display: flex;
  background-color: #fff;
  margin-top: 15px;
  box-shadow: 0 0em 0em rgb(0 0 0 / 10%);

  .img {
    // border: 1px solid red;
    height: 120px;
    margin: auto 0;

    img {
      height: 100%;
    }
  }

  .right {
    text-align: left;
    margin: auto 0;

    div {
      margin: 8px 0;
    }

    .name {
      font-size: 16px;
      font-weight: 600;
      width: 180px;
      //   overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }

    .desc {
      font-size: 12px;
      height: 30px;
      width: 160px;
      color: gray;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      color: #ec6413;
    }
  }
}

.card:hover {
  box-shadow: 0 0.5em 3em rgb(0 0 0 / 10%);
  transition: 0.3s;
}
</style>